<template>
    <div>
        <!-- <h1>评分</h1>
        <div class="box">
            <h2>
                <span>卷名:java第五周考试</span>
                &nbsp;
                <span>总分:100</span>
                &nbsp;
                <span>题目:20道</span>
                &nbsp;
                <span>班级:JAVA87</span>
                &nbsp;
                <span>难度:87%</span>
            </h2>
            <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 800px"
                :default-sort="{ prop: 'date', order: 'descending' }" border>
                <el-table-column prop="name" label="姓名" width="275">
                </el-table-column>
                <el-table-column prop="date" label="提交时间" sortable width="200">
                </el-table-column>
                <el-table-column prop="time" label="用时" sortable width="120">
                </el-table-column>
                <el-table-column prop="fraction" label="分数" sortable width="120">
                </el-table-column>
                <el-table-column prop="state" label="操作" sortable width="80">
                    <template slot-scope="scope">
                        <el-button type="text" @click="hux(scope.row)">评分</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
        </div> -->
        <Scoringdetails></Scoringdetails>
    </div>
</template>

<script>
import Scoringdetails from '@/components/score/Scoringdetails.vue';
export default {
    components: {
        Scoringdetails
    },
    data() {
        return {
            pagesize: 5,
            currentPage: 1,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                time: '1540秒',
                fraction: '67',
                state: '评分'
            }, {
                date: '2016-05-02',
                name: '王小狗',
                time: '1541秒',
                fraction: '68',
                state: '评分'
            }, {
                date: '2016-05-02',
                name: '王小猫',
                time: '1550秒',
                fraction: '69',
                state: '评分'
            }, {
                date: '2016-05-02',
                name: '王小',
                time: '1520秒',
                fraction: '70',
                state: '评分'
            }, {
                date: '2016-05-02',
                name: '王小猫',
                time: '1550秒',
                fraction: '69',
                state: '已完成'

            }]
        }
    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        handleSizeChange(val) {
            this.$data.pagesize = val//将每页显示的条数 = 改变的值
            // console.log(`每页 ${val} 条`)//每页下拉显示数据
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`) //点击第几页
            this.$data.currentPage = val //然后将当前页 = 改变的值
        },
        hux() {
            this.$router.push({ 'path': '/Scoring' });
        }
    },
}
</script>

<style lang="less" scoped>
h2 {
    margin-top: 0;
}

h1 {
    text-align: left;
    padding-left: 10px;
}

.box {
    text-align: left;
    padding: 5px 20px;
}
</style>